<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" +
            request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="shortcut icon" href="/static/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="/static/css/font.css">
    <link rel="stylesheet" href="/static/css/xadmin.css">
    <script type="text/javascript" src="/static/js/jquery-2.1.1.min.js"></script>
    <script src="/static/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/static/js/xadmin.js"></script>

</head>
<body class="login-bg">

<div class="login">
    <div class="message">用户注册</div>
    <div id="darkbannerwrap"></div>
    <hr class="hr15">

    <form action="" method="post" class="layui-form">
        <input name="uAccount" placeholder="账号" id="uAccount"  type="text" class="layui-input" onblur="checkAccount()">
        <p id="notice_account" style="color: red"></p>
        <hr class="hr15">
        <input name="uPassword" placeholder="密码" id="uPassword"  type="password" class="layui-input" onblur="checkPassword()">
        <p id="notice_password" style="color: red"></p>
        <hr class="hr15">
        <input name="uPhone" placeholder="手机号" id="uPhone"  type="text" class="layui-input" onblur="checkPhone()">
        <p id="notice_phone" style="color: red"></p>
        <hr class="hr15">
        <input name="uCode" placeholder="验证码" id="code"  type="text" class="layui-input">
        <hr class="hr15">
        <button type="button" class="layui-btn layui-btn-xs" id="btn_code" onclick="getCode(this)">获取验证码</button>
        <hr class="hr15">
        <input value="注册" style="width:100%;" type="button" onclick="register()">
        <hr class="hr20" >
        <button type="button" class="layui-btn layui-btn-normal" onclick="Tologin()">返回登录</button>
        <hr class="hr20" >
    </form>

</div>


<%--js代码--%>
<script>

    var flagPhone = false;
    var flagAccount = false;
    var flagPassword = false;

    //注册
    function register(){
        if (flagAccount == true && flagAccount == true && flagPassword == true){
            $.ajax({
                url:"/user/register",
                type:"post",
                dataType:"json",
                data:{
                    uAccount:$("#uAccount").val(),
                    uPassword:$("#uPassword").val(),
                    uPhone:$("#uPhone").val(),
                    code:$("#code").val()
                },
                success:function (data){
                    layer.alert(data.data + "注册成功",{icon:6},function (){
                        location.href = "/sys/goLogin"
                    })
                }
            })
        }else {
            checkAccount();
            checkPhone();
            checkPassword();
        }
    }

    //返回登录
    function Tologin(){
        location.href="/sys/goLogin"
    }

    //获取验证码
    function getCode(obj){
        if (flagPhone == true){
            $.ajax({
                url:"/user/getCode",
                type: "post",
                data:{
                    uPhone:$("#uPhone").val()
                },
                success:function (data){
                    console.log(data.msg);
                }
            });
            time(obj);
        }else {
            checkPhone();
        }

    }

    //60秒之后获取验证码
    var wait=60;
    function time(obj) {
        if (wait == 0) {
            obj.removeAttribute("disabled");
            obj.innerHTML="获取验证码";
            wait = 60;
        } else {

            obj.setAttribute("disabled", true);
            obj.innerHTML=wait+"秒后重新发送";
            wait--;
            setTimeout(function() {
                    time(obj)
                },
                1000)
        }
    }

    //检查手机号
    function checkPhone(){
        let validPattern = /^1[3|4|5|6|7|8|9]\d{9}$/;
        let phone = $("#uPhone").val();
        flagPhone = validPattern.test(phone);
        console.log(flagPhone)
        if (flagPhone != true){
            $("#notice_phone").text("请输入正确的手机号");
            flagPhone = false;
        }else {
            $("#notice_phone").text("");
        }
    }

    //检查重复账号与账号长度
    function checkAccount(){
        let validPattern =/^[\u4E00-\u9FA5A-Za-z0-9_]+$/;
        let uAccount = $("#uAccount").val();

        flagAccount = validPattern.test(uAccount);

        if (uAccount.length < 4) {
            $("#notice_account").text("账号不得小于4位");
            flagAccount = false;
        }
        else if (flagAccount != true){
            $("#notice_account").text("请输入中、英、数字、下划线组成的账号");
            flagAccount = false;
        }
        else {
            $("#notice_account").text("");
            $.ajax({
                url:"/user/checkAccount",
                type:"post",
                dataType: "json",
                data:{uAccount:uAccount},
                success:function (data){
                    $("#notice_account").text(data.msg);
                }
            })
        }

    }

    //检查密码长度
    function checkPassword(){
        let uPasswordLength = $("#uPassword").val().length;
        if (uPasswordLength < 4){
            $("#notice_password").text("密码长度不得少于4位");
        }else {
            $("#notice_password").text("");
            flagPassword = true;
        }
    }

</script>

</body>
</html>
